<script setup>
// 主界面
const cluster_item_data = [
  {
    title: 'ios',
    theitem:
      '致力基于iOS系统的移动应用开发，主要使用Objective- C 语言进行开发。有着先进的iOS开发设备，积极活跃的开发团队，团队成员互相合作，共同进步，积极参加各类竞赛。也正因如此，近几年来我们都取得了非常可观的成绩，如今已经有玩转西邮，西邮成绩，西邮图书馆，近健步行等多个APP上线，除此之外我们的就业率更是达到了百分之百，并且都是就职于腾讯，百度，爱奇艺，搜狐等大型互联网公司。怀揣着对iOS开发的无限热情，我们将继续努力，共同进步。',
  },
  {
    title: 'android',
    theitem:
      '致力于 Android 移动平台的 APP 开发。组内活跃着学习的气息和交流的热情，是 Google 大学合作部——Android 人才培养示范基地。在这样的环境下，我们努力创造出自己的 APP，取得Google 全国大学生移动互联网创新挑战赛金奖、银奖，爱奇艺全国高校技术大赛最佳创新奖等等。我们，因共同热爱而聚集，为开发梦想而诞生。',
  },
  {
    title: 'web',
    theitem:
      '致力于电脑网页，手机网页和以Node.js为主的服务端开发。如今已上线多个项目，其中包括《3gMUsic》，《Interest》，《WVUE-UI》，《西邮读书会》等。我们不仅追求“高调”的技术，在“斩码”的途中，大家更是互帮互助，披荆斩棘，培养了深厚的友谊，小组内学习氛围浓厚，闲暇时光更是欢乐无比，能让你找到真正的归属感。性感表现代码，把不可能变成可能。',
  },
  {
    title: 'server',
    theitem:
      '我们热爱技术，致力于开发出优秀、高性能、安全的Web服务。小组内成员积极讨论，项目合作开发集思广益，与其余小组成员之间互相帮助，你追我敢，积极讨论各种问题，使得我们能过灭霸(bug)而行，从我们开始，让后端组还有实验室变得更好。',
  },
]
</script>
<template>
  <div class="content">
    <header class="header_bg">
      <img
        src="../assets/the-header.png"
        alt=""
      />
      <!-- <h1 class="title">Welcome To 3G</h1> -->
    </header>
    <div class="total">
      <div>
        <h1>实验室简介</h1>
      </div>

      <p>
        西安邮电大学移动应用开发实验室，亦称西安邮电大学3G实验室。创建于2011年，隶属于西安邮电大学计算机学院，专注于移动应用开发。
        2012年被谷歌授予“Android人才培养示范基地”（Google中国大学合作部）
      </p>
      <div class="image-container">
        <img
          id="header3-left"
          src="../assets/header3.png"
          alt=""
        />
        <img
          id="header4-left"
          src="../assets/header4.png"
          alt=""
        />
      </div>
      <p>实验室位于西安邮电大学长安校区东区教学楼一层FZ155教室，西邮IT应用型人才实训中心。</p>
      <p style="font-weight: 600">实验室为同学们提供了丰富的软、硬件资源</p>
      <p>
        120m2配备空调、独立桌子、靠背椅、饮水机的干净、整洁、舒适的学习环境。
        公共图书角、免费学习资料、科学上网、共享打印设备、投影仪等便利的学习资源。 学习路线、周报或圆桌分享、官网wiki
        的学习分享、定时的讲课、老师指导的独特学习方式。 毕业学长学姐的工作经验指导、春招秋招的内推直推优势的就业资源。
      </p>
      <div class="image-container">
        <img
          id="header3-left"
          src="../assets/header5.png"
          alt=""
        />
        <img
          id="header4-left"
          src="../assets/header6.jpg"
          alt=""
        />
      </div>
    </div>
    <!-- 分组介绍 -->
    <div class="cluster_content">
      <h1>分组介绍</h1>
      <div
        class="cluster_item"
        v-for="(item, index) in cluster_item_data"
        :key="index"
      >
        <div class="info">
          <span>{{ item.title }}</span>
          <p>
            {{ item.theitem }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.content {
  margin: 0;
  background-color: #165047;
  /* width: 100vh; */
  // height: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.header_bg img {
  /* background: url('../assets/the-header.png') no-repeat; */
  width: 100%;
  position: relative;
  border: 1px solid #dfa421;
  border-radius: 10%;
}
.total {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3rem;
  padding: 1rem;
  background-color: rgba(236, 227, 215, 0.3);

  h1 {
    color: #dfa421;
    font-weight: 500;
  }
  p {
    color: #faebcb;
  }
  .image-container {
    display: flex;
    justify-content: space-between;
    width: 100%;
    img {
      width: 45%; /* 图片宽度占总宽度的一半 */
    }
  }
}
.cluster_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 3rem;
  padding: 1rem;
  background-color: rgba(236, 227, 215, 0.3);
  h1 {
    color: #dfa421;
    font-weight: 500;
  }
  .cluster_item {
    border: 1px solid #165047;
    margin: 10px;
    padding: 5px;
    span {
      color: #dfb197;
      font-size: 20px;
      font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    p {
      color: #faebcb;
    }
  }
}

/* 当视口宽度小于 600px 时应用的样式 */
@media screen and (max-width: 600px) {
  .total {
    margin: 1rem;
    padding: 0.5rem;
    h1 {
      font-size: 1rem;
    }
    p {
      font-size: 0.7rem;
    }
    .image-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      img {
        width: 48%; /* 图片宽度占总宽度的一半 */
      }
    }
  }
  .cluster_content {
    margin: 1rem;
    padding: 0.5rem;
    h1 {
      font-weight: 500;
    }
    .cluster_item {
      margin: 5px;
      padding: 5px;
      span {
        font-size: 1rem;
      }
      p {
        font-size: 0.7rem;
      }
    }
  }
}

/* 当视口宽度大于等于 600px 且小于等于 1200px 时应用的样式 */
@media screen and (min-width: 601px) and (max-width: 1200px) {
  /* .content {
    width: 60px;
    height: 60px;
    background-color: red;
  } */
}

/* 当视口宽度大于 1200px 时应用的样式 */
@media screen and (min-width: 1201px) {
  .total {
    margin: 3rem;
    padding: 2rem;
    h1 {
      font-size: 3rem;
    }
    p {
      font-size: 1.5rem;
    }
    .image-container {
      display: flex;
      justify-content: space-between;
      width: 100%;
      img {
        margin: 0 100px;
        width: 30%; /* 图片宽度占总宽度的一半 */
      }
    }
  }

  .cluster_content {
    // margin: 6rem;
    padding: 2rem;
    h1 {
      font-weight: 500;
    }
    .cluster_item {
      margin: 5px;
      padding: 5px;
      span {
        font-size: 3rem;
      }
      p {
        font-size: 1.5rem;
      }
    }
  }
}
</style>
